<template>
	<view>
		<view class="top" @click="vipRecord">
			充值记录
		</view>
		<view class="topcard" v-if="cardInfo == ''">
			<view class="content">
				<view class="cardleave">
					普通会员
				</view>
			</view>
		</view>
		<view class="topcard" v-if="cardInfo != ''" :style="{ 'background-image': 'url(' + bgimg + ')' }">
			<view class="content">
				<view class="cardleave">
					{{cardInfo.name}}
				</view>
				<view class="lastdata">
					到期日期: {{userData.expirationData | dateFormat}}
				</view>
			</view>
		</view>
		<view class="middle" v-if="cardInfo != ''">
			<view class="title">
				<view class="title-left">
					会员服务
				</view>
				<view class="title-right" style="margin-left: 20rpx;">
					Server
				</view>
			</view>
			<view class="content">
				<!-- <scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-if="userData.server1 != 0">
						<view class="image">
							<image :src="http + serverListt[0].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[0].title}}
						</view>
						<view class="number">
							剩余{{userData.server1}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server2 != 0">
						<view class="image">
							<image :src="http + serverListt[1].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[1].title}}
						</view>
						<view class="number">
							剩余{{userData.server2}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server3 != 0">
						<view class="image">
							<image :src="http + serverListt[2].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[2].title}}
						</view>
						<view class="number">
							剩余{{userData.server3}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server4 != 0">
						<view class="image">
							<image :src="http + serverListt[3].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[3].title}}
						</view>
						<view class="number">
							剩余{{userData.server4}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server5 != 0">
						<view class="image">
							<image :src="http + serverListt[4].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[4].title}}
						</view>
						<view class="number">
							剩余{{userData.server5}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server6 != 0">
						<view class="image">
							<image :src="http + serverListt[5].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[5].title}}
						</view>
						<view class="number">
							剩余{{userData.server6}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server7 != 0">
						<view class="image">
							<image :src="http + serverListt[6].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[6].title}}
						</view>
						<view class="number">
							剩余{{userData.server7}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server8 != 0">
						<view class="image">
							<image :src="http + serverListt[7].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[7].title}}
						</view>
						<view class="number">
							剩余{{userData.server8}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server9 != 0">
						<view class="image">
							<image :src="http + serverListt[8].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[8].title}}
						</view>
						<view class="number">
							剩余{{userData.server9}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server10 != 0">
						<view class="image">
							<image :src="http + serverListt[9].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[9].title}}
						</view>
						<view class="number">
							剩余{{userData.server10}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server11 != 0">
						<view class="image">
							<image :src="http + serverListt[10].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[10].title}}
						</view>
						<view class="number">
							剩余{{userData.server11}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server12 != 0">
						<view class="image">
							<image :src="http + serverListt[11].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[11].title}}
						</view>
						<view class="number">
							剩余{{userData.server12}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server13 != 0">
						<view class="image">
							<image :src="http + serverListt[12].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[12].title}}
						</view>
						<view class="number">
							剩余{{userData.server13}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server14 != 0">
						<view class="image">
							<image :src="http + serverListt[13].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[13].title}}
						</view>
						<view class="number">
							剩余{{userData.server14}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server15 != 0">
						<view class="image">
							<image :src="http + serverListt[14].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[14].title}}
						</view>
						<view class="number">
							剩余{{userData.server15}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server16 != 0">
						<view class="image">
							<image :src="http + serverListt[15].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[15].title}}
						</view>
						<view class="number">
							剩余{{userData.server16}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server17 != 0">
						<view class="image">
							<image :src="http + serverListt[16].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[16].title}}
						</view>
						<view class="number">
							剩余{{userData.server17}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server18 != 0">
						<view class="image">
							<image :src="http + serverListt[17].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[17].title}}
						</view>
						<view class="number">
							剩余{{userData.server18}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server19 != 0">
						<view class="image">
							<image :src="http + serverListt[18].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[18].title}}
						</view>
						<view class="number">
							剩余{{userData.server19}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server20 != 0">
						<view class="image">
							<image :src="http + serverListt[19].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[19].title}}
						</view>
						<view class="number">
							剩余{{userData.server20}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server21 != 0">
						<view class="image">
							<image :src="http + serverListt[20].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[20].title}}
						</view>
						<view class="number">
							剩余{{userData.server21}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server22 != 0">
						<view class="image">
							<image :src="http + serverListt[21].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[21].title}}
						</view>
						<view class="number">
							剩余{{userData.server22}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server23 != 0">
						<view class="image">
							<image :src="http + serverListt[22].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[22].title}}
						</view>
						<view class="number">
							剩余{{userData.server23}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server24 != 0">
						<view class="image">
							<image :src="http + serverListt[23].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[23].title}}
						</view>
						<view class="number">
							剩余{{userData.server24}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server25 != 0">
						<view class="image">
							<image :src="http + serverListt[24].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[24].title}}
						</view>
						<view class="number">
							剩余{{userData.server25}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server26 != 0">
						<view class="image">
							<image :src="http + serverListt[25].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[25].title}}
						</view>
						<view class="number">
							剩余{{userData.server26}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server27 != 0">
						<view class="image">
							<image :src="http + serverListt[26].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[26].title}}
						</view>
						<view class="number">
							剩余{{userData.server27}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server28 != 0">
						<view class="image">
							<image :src="http + serverListt[27].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[27].title}}
						</view>
						<view class="number">
							剩余{{userData.server28}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server29 != 0">
						<view class="image">
							<image :src="http + serverListt[28].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[28].title}}
						</view>
						<view class="number">
							剩余{{userData.server29}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="userData.server30 != 0">
						<view class="image">
							<image :src="http + serverListt[29].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{serverListt[29].title}}
						</view>
						<view class="number">
							剩余{{userData.server30}}次
						</view>
					</view>
				</scroll-view> -->
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="item in serverNum" :key="item.carwashid" @click="goserver(item.carwashid)">
						<view class="image">
							<image :src="http+ item.list.squareImage" mode=""></image>
						</view>
						<view class="name">
							{{item.title}}
						</view>
						<view class="number">
							{{item.num}}次
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="describe">
				<text>{{cardInfo.detaile}}</text>
			</view>
			<view class="imageList">
				<view class="list-item" v-for="item,k in urlsList" :key="k">
					<image :src="item" mode=""></image>
				</view>
			</view>
		</view>
		<view class="suggest">
			<view class="title">
				推荐
			</view>
			<view class="content">
				<view 
					class="vipitem"
					:style="{ 'background-image': 'url(' +http + item.thumb + ')' }"
					v-for="item in viplist" 
					:key="item.id"
					@click="gobuyvip(item.id)"
				>
					<view class="item-top">
						{{item.name}}
					</view>
					<view class="item-bottom">
						<view class="left">
							购卡限时:{{item.activityDuration | dateFormat}}
						</view>
						<view class="right">
							<u-icon name="rmb"></u-icon>{{item.free}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: [],
				cardInfo: [],
				viplist: [],
				serverListt: [],
				urlsList: [],
				serverNum: [],
				leave: 0,
				bgimg: '',
				stoid: '',
				http: 'https://luxuries.h1668.com/'
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.userData = uni.getStorageSync('userData');
			// this.getUserData()
			this.getvipList()
			this.getServerLists()
		},
		methods: {
			goserver(id) {
				let item = {
				    serverId: id,
					stoid: this.stoid,
				};
				uni.navigateTo({
					url: '/pagesB/server/serverDetail?item='+ encodeURIComponent(JSON.stringify(item))
				})
			},
			vipRecord() {
				uni.navigateTo({
					url: '/pagesB/vipGrade/vipRecord'
				})
			},
			gobuyvip(id) {
				uni.navigateTo({
					url: '/pagesB/vipGrade/vipDetail?id=' +id
				})
			},
			getvipList() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/user/user/vipList',
					method: 'POST',
					data: {
						busid: this.userData.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.viplist = res.data.data
					}
				});
			},
			// getUserData() {
			// 	uni.request({
			// 		url: uni.getStorageSync('URL') + 'home/user/user/userData',
			// 		method: 'POST',
			// 		data: {
			// 			busid: this.userData.id
			// 		},
			// 		header: {
			// 			"X-Requested-With": "XMLHttpRequest"
			// 		},
			// 		dataType: 'json',
			// 		success: (res)=> {
			// 			this.userData = res.data.data.user
			// 			this.cardInfo = res.data.data.vip
			// 			this.urlsList = res.data.data.vip.urlsList
			// 			this.serverNum = res.data.data.serverlist
			// 			this.bgimg = 'https://luxuries.h1668.com' + this.cardInfo.thumb
			// 			this.stoid = res.data.data.user.stoid
			// 		}
			// 	});
			// },
			getServerLists() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/carpark/carpark/getServerLists',
					method: 'POST',
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.serverListt = res.data.data
					}
				});
			}
		},
		filters: {
			dateFormat: function(val) {// 格式化时间
				const dt = new Date(val*1000)
				const y = dt.getFullYear()
				const m = dt.getMonth() +1
				const d = dt.getDate()
				 
				return `${y}-${m}-${d}`
			},
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.top {
	width: 95%;
	height: 35px;
	line-height: 35px;
	text-align: right;
}
.topcard {
	width: 95%;
	height: 500rpx;
	background-color: #000000;
	margin: 20rpx auto;
	border-radius: 20rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.content {
		color: white;
		width: 100%;
		height: 100%;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.cardleave {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 22px;
			text-align: right;
		}
		.lastdata {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 22px;
			text-align: right;
			margin-top: 100rpx;
		}
	}
	
}
.middle {
	padding: 15rpx;
	.title {
		width: 100%;
		font-size: 21px;
		font-family: Helvetica;
		letter-spacing: 2px;
		display: flex;
		line-height: 30px;
		height: 30px;
	}
	.content {
		width: 100%;
		margin-top: 40rpx;
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			.scroll-view-item_H {
				display: inline-block;
				width: 40%;
				height: 400rpx;
				background-color: #fafafa;
				margin-left: 10px;
				border-radius: 15rpx;
				.image {
					width: 100%;
					height: 250rpx;
					image{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				.name {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #010101;
				}
				.number {
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #8a8a8a;
				}
			}
		}
	}
	.describe {
		width: 100%;
		margin-top: 40rpx;
		font-family: Helvetica;
		letter-spacing: 2px;
		text-indent: 4ch;
		padding: 10rpx;
	}
	.imageList {
		width: 100%;
		margin-top: 40rpx;
		padding: 10rpx;
		.list-item {
			width: 100%;
			height: 400rpx;
			image {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
}
.suggest {
	padding: 15rpx;
	.title {
		width: 100%;
		font-size: 21px;
		font-family: Helvetica;
		letter-spacing: 2px;
		display: flex;
		line-height: 30px;
		height: 30px;
	}
	.content {
		width: 100%;
		margin-top: 40rpx;
		.vipitem {
			width: 100%;
			height: 230rpx;
			color: #fff;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-top: 10rpx;
			.item-top {
				width: 100%;
				height: 140rpx;
				line-height: 140rpx;
				padding: 10rpx;
				// background-color: #888481;
				// opacity: 0.8;
			}
			.item-bottom {
				width: 100%;
				height: 90rpx;
				display: flex;
				.left {
					width: 70%;
					height: 90rpx;
					text-align: left;
					padding: 10rpx;
					display: flex;
					align-items: center;
					background-color: #687177;
					opacity: 0.8;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// display: -webkit-box;
					// -webkit-box-orient: vertical;
					// -webkit-line-clamp: 2; /* 显示两行 */
				}
				.right {
					width: 30%;
					height: 90rpx;
					line-height: 90rpx;
					background-color: #3d484a;
					text-align: center;
					opacity: 0.9;
					padding: 10rpx;
				}
			}
		}
	}
}
</style>
